import { Col, Divider, Row ,Image} from 'antd';
import { Link } from 'react-router-dom';

const App = () => (
  <>
    <Divider orientation="left">Charts</Divider>
    <Row gutter={[16, 24]}>
      <Col className="gutter-row" span={6}>
        <div>
          <Link to='/LineChart'>
            <Image src='/img/line.png' preview={false}></Image>
            <text>Bascie Line</text>
          </Link>
        </div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div >
        <Link to='/AreaChart'>
            <Image src='/img/area.png' preview={false}></Image>
            <text>Bascie Area</text>
          </Link>
        </div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div >
        <Link to='/BarChart'>
            <Image src='/img/Bar.png' preview={false}></Image>
            <text>Bascie Bar</text>
          </Link>
        </div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div >
        <Link to='/SEChart'>
            <Image src='/img/SE.png' preview={false}></Image>
            <text>Bascie Simple Encode </text>
          </Link>
        </div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div >
          <Link to='/Piechart'>
          <Image src='/img/Pie.png' preview={false}></Image>
          <text>Basice Pie</text>
          </Link>
        </div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div >
        <Link to='/NightingaleChart'>
            <Image src='/img/Nightingale.png' preview={false}></Image>
            <text>Bascie Nightingale</text>
          </Link>
        </div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div >
        <Link to='/SunburstChart'>
            <Image src='/img/sunburst.png' preview={false}></Image>
            <text>Bascie Sunburst</text>
          </Link>
        </div>
      </Col>

      <Col className="gutter-row" span={6}>
        <div >
        <Link to='/TreeChart'>
            <Image src='/img/tree.png' preview={false}></Image>
            <text>Bascie Tree</text>
          </Link>
        </div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div >
        <Link to='/ScatterChart'>
            <Image src='/img/scatter.png' preview={false}></Image>
            <text>Bascie Line</text>
          </Link>
        </div>
      </Col>

      <Col className="gutter-row" span={6}>
        <div >
        <Link to='/BubbleChart'>
            <Image src='/img/Bubble.png' preview={false}></Image>
            <text>Bascie Bubble</text>
          </Link>
        </div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div >
        <Link to='/ClusteringChart'>
            <Image src='/img/Clustering.png' preview={false}></Image>
            <text>Bascie Clustering Process</text>
          </Link>
        </div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div >
        <Link to='/LRChart'>
            <Image src='/img/LR.png' preview={false}></Image>
            <text>Bascie Linear Regression</text>
          </Link>
        </div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div >
        <Link to='/ERChart'>
            <Image src='/img/ER.png' preview={false}></Image>
            <text>Bascie Exponential Regression</text>
          </Link>
        </div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div >
        <Link to='/PRChart'>
            <Image src='/img/PR.png' preview={false}></Image>
            <text>Bascie Polynomial Regression</text>
          </Link>
        </div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div >
        <Link to='/BoxplotChart'>
            <Image src='/img/box.png' preview={false}></Image>
            <text>Bascie Box</text>
          </Link>
        </div>
      </Col>
      <Col className="gutter-row" span={6}>
        <div >
        <Link to='/SankeyChart'>
            <Image src='/img/Sankey.png' preview={false}></Image>
            <text>Bascie Sankey</text>
          </Link>
        </div>
      </Col>
    </Row>
  </>
);
export default App;